Form Menu

Please consult online or printed sources for more information on implementing forms and form processing tools.

Each of the various form widgets is specified by one of three HTML elements: INPUT, SELECT, or TEXTAREA. All except Reset and Submit require a unique NAME attribute. Note that NAME is not displayed; it is a symbolic value used by the server to distinguish individual form elements.

A Submit element is mandatory in all forms except those containing only a single INPUT element of type TEXT (in which case Return in the text entry area submits the form) or at least one INPUT element of type IMAGE (in which case a click in the image submits the form). 

As they are not necessarily visually differentiated from the rest of an HTML document, it is recommended that forms be preceded and followed by a horizontal rule <HR>.

The Form menu contains:

New Form
All form contents are surrounded by a beginning <FORM> and ending </FORM> tag. Any HTML elements are allowed in a form except another form. To create a new form, place the insertion point into your document where you wish the form to be placed, then select New Form from the Form menu. A dialog requests three attributes, the last one optional: 

   ACTION: a URL reference to the form processor (eg., a CGI script).
   METHOD: either GET or POST. POST is recommended.
   ENCTYPE: specifies the encoding method for the form contents.

   <FORM METHOD="post" ACTION="http://www.foo.com/cgi-bin/form.cgi">

INPUT

The INPUT element is used to specify a single input widget within a form. INPUT elements have no closing tag and do not surround any text. Each is designated by a different TYPE attribute ("text" is default):

TYPE=Text
Displayed as a text entry field, with options for default contents (VALUE), physical size of the field (SIZE, default=20), and maximum number of characters (MAXLENGTH).

   <INPUT TYPE="text" NAME="question1" VALUE="username" SIZE=10 MAXLENGTH=16>

TYPE=Password
Same attributes as "Text", but entered characters are not presented in a readable form.

   <INPUT TYPE="password" NAME="question2" SIZE=10 MAXLENGTH=10>

TYPE=Hidden
Hidden form elements are not displayed to the user and each contain a NAME and VALUE pair. This can be read by the server to maintain "state" information over multiple connections to a server.

   <INPUT TYPE="hidden" NAME="form3" VALUE="z14:22:45/akoestler">

Note that while hidden elements are not displayed, they are not protected from being discovered using "View Source" on a browser.

TYPE=Radio
Creates a single on or off toggle button; other toggles with the same NAME are grouped into "one of many" behavior. The VALUE attribute specifies the content of the button when it is "on". Including a CHECKED attribute specifies that this radio button is checked ("on") by default.

   <INPUT TYPE="radio" NAME="question3" VALUE="chicken" CHECKED>
   <INPUT TYPE="radio" NAME="question3" VALUE="pork">
   <INPUT TYPE="radio" NAME="question3" VALUE="fish">

TYPE=Checkbox
Creates a single on or off toggle button, generally in the form of a checkbox (though this is strictly up to the browser). The VALUE attribute specifies the content of the button when it is "on". Including a CHECKED attribute specifies that this checkbox is checked ("on") by default.

   <INPUT TYPE="checkbox" NAME="question4" VALUE="Imrat Khan" CHECKED>
   <INPUT TYPE="checkbox" NAME="question4" VALUE="Ali Akbar Khan">

TYPE=Image
The Image widget displays an image similar to the IMG element with an ISMAP attribute. Clicking on the image records the location of the click in the form submission. Clicking on an image may also be used as the method by which the form is submitted.

   <INPUT NAME="Larry" TYPE="image" SRC="http://www.foo.com/images/durrell.gif">

TYPE=Reset
Uses an optional VALUE atribute to specify the label for the pushbutton. 

   <INPUT TYPE="reset" VALUE="Start Over">

TYPE=Submit
Uses an optional VALUE atribute to specify the label for the pushbutton. 

   <INPUT TYPE="submit" VALUE="Submit Form">

SELECT

Within a form any number of SELECT tags are allowed, freely intermixed with other HTML elements (including INPUT and TEXTAREA elements) and text (but not additional forms). How SELECT tags are displayed is up to the browser, but usually appear as option menus and scrolled lists. 

Unlike INPUT, SELECT has both opening and closing tags. Inside SELECT, only a sequence of
OPTION tags, each followed by an arbitrary amount of plain text (no HTML markup) -- is
allowed; for example: 

   <P><SELECT NAME="sea-adventures">
   <OPTION>Conrad: Typhoon
   <OPTION SELECTED>Conrad: Heart of Darkness
   <OPTION>Conrad: The Secret Sharer
   <OPTION>Dana: Two Years Before the Mast
   <OPTION>Melville: Typee
   <OPTION>Conrad: Youth
   </SELECT></P>

The three attributes to SELECT are as follows: 

   NAME is the symbolic name for this SELECT element. NAME is required.

   SIZE: if SIZE=1 or if the SIZE attribute is missing, by default the SELECT will
   be represented as an option menu. If SIZE is 2 or more, the SELECT will be
   represented as a scrolled list; the value of SIZE then determines how many
   items will be visible. 

   MULTIPLE, if present (no value), specifies that the SELECT should allow
   multiple selections (n of many behavior). The presence of MULTIPLE forces
   the SELECT to be represented as a scrolled list, regardless of the value of SIZE. 

The OPTION tag may have an optional SELECTED attribute that specifies that this option is selected by default. If the SELECT allows multiple selections (via the MULTIPLE attribute), multiple options can be specified as SELECTED. 

TEXTAREA

The TEXTAREA element can be used to place a multiline text entry field with optional default contents in a fill-out form. The attributes to TEXTAREA are as follows: 

   NAME is the symbolic name of the text entry field. 
   ROWS is the number of rows (vertical height in characters) of the text entry field. 
   COLS is the number of columns (horizontal width in characters) of the text entry field. 

TEXTAREA fields automatically have scrollbars; any amount of text can be entered in them. 

The TEXTAREA element requires both an opening and a closing tag. A TEXTAREA with no default contents looks like this: 

   <TEXTAREA NAME="foo" ROWS=4 COLS=40></TEXTAREA>

A TEXTAREA with default contents looks like this: 

   <TEXTAREA NAME="foo" ROWS=4 COLS=40>
   Default contents go here.
   </TEXTAREA>

The default contents must be straight ASCII text. Return characters are respected (so in the above example there will be a return both before and after "Default contents go here."). 

Back to Anchor menu, on to Table menu, or return to Tool Palette Menus.